
<template>
  <div class="video-player-box"
      :playsinline="playsinline"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnded($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @canplay="onPlayerCanplay($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
      @ready="playerReadied"
      @statechanged="playerStateChanged($event)"
      v-video-player:myVideoPlayer="playerOptions"
    >
  </div>
</template>
<script>	
import axios from 'axios'
export default {
  data () {
    return {
      formDate:{
        pageNo: 1,  
        pageSize:10,
        resType:0
      },
      list:[],
      playerOptions: {
        muted: false,
        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: "video/mp4",
          src: ""
        }],
        // autoplay: true,     //自动播放
        width:'640px',
        notSupportedMessage: '此视频暂无法播放，请稍后再试', 
        poster:'', // 你的封面地址
      }
    }
  },
  created(){
   
  }, 
  mounted() {
    this.init()
  },
  computed: {
    playsinline(){
      if (this.list) {
        return true 
      }else{
        return false           
      }
    } 
  },
  methods:{
    init(){
      let params= this.formDate
      axios.post('/web/tAreaResource/indexresource',params).then((res)=> {
        if(res.data.code == 2000){
          this.list = res.data.data.page.list[0]
          this.playerOptions.sources[0].src = res.data.data.page.list[0].resUrl
          this.playerOptions.poster = res.data.data.page.list[0].resCover
          this.$parent.resName = res.data.data.page.list[0].resName
        }else{
          this.$message.error('服务器错误');
        }
      })
    },
      onPlayerPlay(player) {
        this.videoPlayState = true;
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      onPlayerEnded(player) {
        // console.log('player ended!', player)
      },
      onPlayerLoadeddata(player) {
        // console.log('player Loadeddata!', player)
      },
      onPlayerWaiting(player) {
        // console.log('player Waiting!', player)
      },
      onPlayerPlaying(player) {
        // console.log('player Playing!', player)
      },
      onPlayerTimeupdate(player) {
        // console.log('player Timeupdate!', player.currentTime())
      },
      onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
      },
      onPlayerCanplaythrough(player) {
        // console.log('player Canplaythrough!', player)
      },
      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },
      // player is ready
      playerReadied(player) {
        // console.log('example 01: the player is readied', player)
      }
  },
  
};

</script>

<style scoped lang="scss">

</style>